const ArticleSkeleton: React.FC = () => {
  return (
    <article className='relative flex items-center py-[1.375rem] border-b-[1px] border-b-[#EBEBEB] border-b-solid lg:py-[1.6875rem] 2xl:py-[2.53125rem] hover:bg-gray-100 transition-colors duration-200 cursor-pointer'>
      {/* 图片 */}
      <div className='flex-shrink-0 relative w-[9.3125rem] h-[5.8125rem] bg-gray-100 lg:w-[12.4375rem] lg:h-[7.75rem] 2xl:w-[18.65625rem] 2xl:h-[11.625rem] skeleton rounded-[4px]'></div>
      <div className='flex-shrink-0 w-[0.625rem] lg:w-[0.8125rem] 2xl:w-[1.21875rem]' />
      {/* 右侧内容 */}
      <div className='flex flex-col h-[5.8125rem] lg:justify-between lg:h-[7.75rem] 2xl:h-[11.625rem]'>
        <div>
          <h2 className='line-clamp-1 font-medium text-[#333333] text-[0.875rem] leading-[1.1875rem] 2xl:text-[1.3125rem] 2xl:leading-[1.78125rem] skeleton rounded-[4px]'>
            <div className='opacity-0'>11111111</div>
          </h2>
          <div className='lg:h-2'></div>
          <p className='line-clamp-2 font-medium text-[#666666] leading-[1.0625rem] text-[0.75rem] 2xl:text-[1.125rem] 2xl:leading-[1.59375rem] skeleton rounded-[4px]'>
            <div className='opacity-0'>
              11111111111111111111111111111111111111111111
            </div>
          </p>
        </div>
        <div className='h-[0.75rem]' />
        <div className='flex items-center space-x-1 lg:mb-2 2xl:mb-3'>
          {/* 图标 */}
          <div className='relative w-[0.75rem] h-[0.75rem] space-x-1 2xl:w-[1.125rem] 2xl:h-[1.125rem] 2xl:space-x-[0.375rem] skeleton rounded-[4px]'></div>
          {/* 时间 */}
          <div className='text-[#999999] text-[0.75rem] leading-[0.75rem] font-medium 2xl:text-[1.125rem] 2xl:leading-[1.125rem] skeleton rounded-[4px]'>
            <div className='opacity-0'>
              11111111111111111111111111111111111111111111111
            </div>
          </div>
        </div>
      </div>
      <button className='skeleton rounded-[4px] absolute bottom-[1.375rem] right-0 flex justify-center items-center px-3 py-2 bg-[#202227] hover:bg-gray-700 transition-colors duration-200 text-white text-[0.875rem] leading-[0.875rem] font-medium lg:bottom-[1.6875rem] 2xl:bottom-[2.53125rem] 2xl:px-[1.125rem] 2xl:py-3 2xl:text-[1.3125rem] 2xl:leading-[1.3125rem]'>
        <div className='opacity-0'>11111111</div>
      </button>
    </article>
  )
}

export default ArticleSkeleton
